<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";

const props = defineProps({
  files: {
    required: true,
    type: Array
  }
})
</script>

<template>
  <template v-for="(file, index) in props.files">
    <div class="d-flex flex-column align-items-center bg-body m-2 p-2 rounded-3 position-relative">
      <div class="d-flex flex-column align-items-center justify-center">
        <img
            v-if="file.type.startsWith('image/')"
            :src="file.base64"
            @dragstart.prevent
            class="img-thumbnail previewSize rounded-3"
            alt="attachment"
        >

        <audio
            v-if="file.type.startsWith('audio/')"
            controls
            :src="file.base64">
        </audio>

        <video
            class="previewSize rounded-3"
            style="filter: brightness(60%)"
            muted
            autoplay
            loop
            v-if="file.type.startsWith('video/')">
          <source :src="file.base64" :type="file.type">
        </video>

      </div>
      <span class="pt-1">{{ file.name }}</span>

      <div class="position-absolute" style="right: -5px; top: -5px">
        <button @click.prevent="console.log(props.files)" class="btn btn-sm btn-danger"><font-awesome-icon :icon="['fas', 'xmark']" /></button>
      </div>
    </div>
  </template>
</template>

<style scoped>
.previewSize {
  max-height: 200px;
}
</style>